<

カスタムフォントを使用する

Android と iOS では高品質のシステム フォントが提供されていますが、 デザイナーからの最も一般的なリクエストの 1 つはカスタム フォントです。 たとえば、デザイナーがカスタム構築したフォントがあるとします。 または、次からフォントをダウンロードした可能性があります。Google フォント。

Flutter はカスタム フォントで動作し、カスタム フォントを適用できます。 アプリ全体または個々のウィジェットにフォントを適用します。 このレシピでは、カスタム フォントを使用するアプリを作成します。 次の手順:

  1. フォントファイルをインポートします。
  2. pubspecでフォントを宣言します。
  3. フォントをデフォルトとして設定します。
  4. 特定のウィジェットでフォントを使用します。

1. フォントファイルをインポートする

フォントを操作するには、フォント ファイルをプロジェクトにインポートします。 フォント ファイルをfontsまたassetsFlutter プロジェクトのルートにあるフォルダー。

たとえば、Raleway および Roboto Mono フォントをインポートするには ファイルをプロジェクトに追加すると、フォルダー構造は次のようになります。

awesome_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf

サポートされているフォント形式

Flutter は次のフォント形式をサポートしています。

  • .ttc
  • .ttf
  • .otf

flutterはサポートしていません.woff.woff2すべてのプラットフォーム用のフォント。

2. pubspec でフォントを宣言する

フォントを特定したら、そのフォントを見つける場所を Flutter に指示します。 これを行うには、フォント定義をpubspec.yamlファイル。

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

pubspec.yamlオプションの定義

familyで使用するフォントの名前を決定します。fontFamilyの財産TextStyle物体。

assetフォント ファイルへのパスです。 に比べてpubspec.yamlファイル。 これらのファイルには、フォント内のグリフのアウトラインが含まれています。 アプリを構築するときに、 これらのファイルはアプリのアセット バンドルに含まれています。

単一のフォントは、異なるファイルを含む多くの異なるファイルを参照できます。 アウトラインのウェイトとスタイル:

  • weightプロパティはアウトラインの太さを指定します。 ファイルは 100 ~ 900 の 100 の整数倍です。 これらの値は、FontWeightで使用できますfontWeightの財産TextStyle物体。 たとえば、を使用したい場合は、RobotoMono-Bold上記で定義したフォント、 あなたは設定するでしょうfontWeightFontWeight.w700あなたの中でTextStyle

    を定義することに注意してください。weightプロパティはそうではありません フォントの実際のウェイトをオーバーライドします。あなたにはできないでしょう アクセスRobotoMono-BoldFontWeight.w100たとえそれがweight100に設定されました。

  • styleプロパティは、ファイル内のアウトラインがitalicまたnormal。 これらの値は、FontStyleで使用できますfontStyleの財産TextStyle物体。 たとえば、を使用したい場合は、Raleway-Italic上記で定義したフォント、 あなたは設定するでしょうfontStyleFontStyle.italicあなたの中でTextStyle

    を定義することに注意してください。styleプロパティはそうではありません フォントの実際のスタイルをオーバーライドします。あなたにはできないでしょう アクセスRaleway-ItalicFontStyle.normalたとえそれがstyle通常に設定されました。

3. フォントをデフォルトとして設定する

テキストにフォントを適用する方法には 2 つのオプションがあります: デフォルトのフォントとして または特定のウィジェット内のみ。

フォントをデフォルトとして使用するには、fontFamily財産 アプリの一部としてtheme。提供される価値は、9fe01141-19e8-4b06-854e-46665e0e7ベッドと一致する必要がありますfamilyで宣言された名前pubspec.yaml

return MaterialApp(
  title: 'Custom Fonts',
  // Set Raleway as the default app font.
  theme: ThemeData(fontFamily: 'Raleway'),
  home: const MyHomePage(),
);

テーマの詳細については、 を参照してくださいテーマを使用して色とフォント スタイルを共有するレシピ。

4. 特定のウィジェットでフォントを使用する

特定のウィジェットにフォントを適用したい場合は、 などTextウィジェット、 を提供するTextStyleウィジェットに。

この例では、RobotoMono フォントを単一のフォントに適用します。Textウィジェット。 もう一度、fontFamilyと一致する必要がありますfamilyで宣言された名前pubspec.yaml

child: Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
),

テキストスタイル

もしTextStyleオブジェクトは重みを指定します または正確なフォント ファイルが存在しないスタイル、 エンジンはより汎用的なファイルの 1 つを使用します フォントの輪郭を外挿しようとします ご要望の重量とスタイルに合わせて。

完全な例

フォント

Raleway フォントと RobotoMono フォントは次からダウンロードされました。Google フォント。

pubspec.yaml

name: custom_fonts
description: An example of how to use custom fonts with Flutter

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700
  uses-material-design: true

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Set Raleway as the default app font.
      theme: ThemeData(fontFamily: 'Raleway'),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default Raleway font.
      appBar: AppBar(title: const Text('Custom Fonts')),
      body: const Center(
        // This Text widget uses the RobotoMono font.
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),
    );
  }
}

Custom Fonts Demo